import styled from '@emotion/styled';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Checkbox, Col, Row } from 'antd';
import AgentService from '@/modules/Agent';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { IVariableList } from '@/modules/interface';

interface SelectVariableProps {
	errorMessage?: string;
	onChangeVariablesList: (e: CheckboxValueType[]) => void;
	onCheckVariablesListAllChange: (e: CheckboxChangeEvent) => void;
	checkVariablesListAll: boolean;
	checkedVariablesList?: CheckboxValueType[];
	variableList: IVariableList[];
}

const CollectVariableTitle = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #202020;
	padding-bottom: 10px;
`;

const VariableName = styled.p`
	padding: 0;
	margin: 0;
	font-weight: 400;
	color: #202020;
	font-size: 13px;
`;

const CollectCheckGroup = styled.div`
	overflow-y: auto;
	height: 302px;
	background: #ffffff;
	border: 1px solid #e8e8e8;
`;

const CollectCheckAll = styled.div`
	padding-top: 8px;
`;

const CollectCheckCol = styled(Col)`
	padding: 8px;
	:hover {
		background-color: #f6f6f6;
	}
`;

const ErrorMessage = styled.p`
	padding-top: 10px;
	margin: 0;
	color: #f8646a;
	font-size: 12px;
`;

const SelectVariable = (props: SelectVariableProps) => {
	const { variableList, onChangeVariablesList, checkedVariablesList, onCheckVariablesListAllChange, checkVariablesListAll, errorMessage } = props;

	const { t } = useTranslation();

	return (
		<div>
			<CollectVariableTitle>{t('select-collect-variable')}</CollectVariableTitle>
			<CollectCheckGroup>
				<Checkbox.Group onChange={e => onChangeVariablesList(e)} value={checkedVariablesList}>
					<Row>
						{variableList.map((item, index) => (
							<CollectCheckCol span={24} key={item.id}>
								<Checkbox value={item.id}>
									<VariableName>{item.name}</VariableName>
								</Checkbox>
							</CollectCheckCol>
						))}
					</Row>
				</Checkbox.Group>
			</CollectCheckGroup>
			<CollectCheckAll>
				<Checkbox onChange={e => onCheckVariablesListAllChange(e)} checked={checkVariablesListAll}>
					{t('select-all')}
				</Checkbox>
			</CollectCheckAll>
			{errorMessage ? <ErrorMessage>{'*' + errorMessage}</ErrorMessage> : undefined}
		</div>
	);
};

export default SelectVariable;
